<template>
  <div class="order-box">
    <div class="order-left">
      <div>
        <div
          v-for="(item, index) in goodsList_x"
          :key="index"
          :class="{ order_left_tab: true, selected: currentTab == index }"
          @click="clickTab(index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="order-right">
      <div>
        <!-- 父亲 -->
        <div v-for="(item, index) in goodsList_x" :key="item.name" :id="index">
          <div class="nameTitle">{{ item.name }}</div>
          <!-- 儿子 -->
          <div
            v-for="child in item.foods"
            :key="child.id"
            style="display: flex; width: 100%; padding: 10px"
          >
            <img
              :src="child.imgUrl"
              style="width: 95px; height: 95px"
              @click="GoodsItem(child)"
            />
            <div style="flex: 1; padding: 10px 15px">
              <h4>{{ child.name }}</h4>
              <div class="mtsi-num">月售:{{ child.sellCount }}</div>
              <div
                style="
                  justify-content: space-between;
                  felx: 1;
                  display: flex;
                  padding: 10px 0;
                "
              >
                <span>￥{{ child.price }}元</span>

                <div style="display: flex; align-items: center">
                  <div
                    class="plus"
                    @click="changeNum(child.id, -1)"
                    v-show="child.num >= 1"
                  >
                    -
                  </div>
                  <span v-show="child.num >= 1">{{ child.num }}</span>
                  <div class="minus" @click="changeNum(child.id, 1)">+</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出购物车的页面 ,使用过度动画实现面板的出现与消失-->
    <transition name="slide-fade">
      <div class="shopcar" v-show="isshow">
        <shopCar></shopCar>
      </div>
    </transition>

    <div class="nav-bottom" @click="isshow = !isshow">
      <div>
        <div class="bottom-left">
          <!-- 获取添加的商品数量 数量>0就显示买了几个 -->
          <span class="icon-num" v-show="getAddNum > 0">{{ getAddNum }}</span>
        </div>
        <div class="bottom-center">
          <!-- v-show 如果价格>0则显示价格 否则不显示 -->
          <p class="price" v-show="getprice > 0">￥{{ getprice }}</p>
          <p class="deliveryPrice">
            预估另需配送费￥{{ sellerList_x.deliveryPrice }}元
          </p>
        </div>
        <div class="bottom-right">去结算</div>
      </div>
    </div>
  </div>
</template>

<script>
import { goodslist } from "../../api/api";
import BScroll from "better-scroll";
import shopCar from "../../views/nav/shopCar.vue";
export default {
  components: {
    shopCar,
  },
  data() {
    return {
      currentTab: 0, //当前选择的tab选项
      isshow: false, //是否显示购物车页面
    };
  },
  created() {
    goodslist().then((res) => {
      // 给商品列表里面的food对象里面加个数量num
      for (let list of res.data.goodsList) {
        for (let child of list.foods) {
          child.num = 0;
          let index = child.goodsDesc.indexOf("要");
          child.ingredient = child.goodsDesc.substr(
            index + 1,
            child.goodsDesc.length
          ); //
        }
      }
      // 将商品列表的值放到vuex里
      this.$store.commit("initgoodsList", res.data.goodsList);
      console.log(res.data.goodsList);
    });
  },
  mounted() {
    this.left = new BScroll(document.querySelector(".order-left"), {
      click: true,
      mouseWheel: true,
    });
    this.order_right = new BScroll(document.querySelector(".order-right"), {
      click: true, //允许滚动面板点击
      probeType: 3, //实时派发滚动事件
      mouseWheel: true, //支持鼠标滚轮 加了这个之后鼠标滚轮才有效果 坑
      // 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
    });
    // 右边滚动时联动左边
    this.order_right.on("scroll", (obj) => {
      // _y当前滚动距离
      let _y = Math.abs(obj.y);
      // 循环判断区间值， 设置选项卡选中索引
      for (let i of this.getDiv) {
        if (_y >= i.startY && _y < i.endY) {
          this.currentTab = i.index;
          break;
        }
      }
    });
  },
  methods: {
    // 左侧点击菜单选项
    clickTab(index) {
      this.currentTab = index;
      // 左侧选项卡连接右侧内容
      //点击某个选项卡,则让右侧滚动到对应的div上
      this.order_right.scrollToElement(document.getElementById(index), 600);
    },
    // 改变购物车的商品数量
    changeNum(id, num) {
      // 把值传到vuex中
      this.$store.commit("changeNum", { id, num });
    },

    // 点击某个商品跳转到商品的详情页面
    GoodsItem(child) {
      // 这里使用vueRouter里的query传参
      this.$router.push({ path: "/goods", query: child });
    },
  },
  computed: {
    // 计算盒子高度的属性
    getDiv() {
      let arr = [];
      let total = 0;
      for (let i = 0; i < this.goodsList_x.length; i++) {
        // console.log(i); 0 1 2 3....
        let curDivHeight = document.getElementById(i).offsetHeight; //获取每个div盒子的高度
        arr.push({ startY: total, endY: total + curDivHeight, index: i });
        total += curDivHeight;
      }
      return arr;
    },

    // 取vuex里商品列表的值
    goodsList_x() {
      return this.$store.state.goodsList;
    },
    // 取vuex商家信息的值
    sellerList_x() {
      return this.$store.state.sellerList;
    },

    // 取vuex里购物车数量>0的值
    shopCarList_x() {
      return this.$store.getters.shopCarList;
    },

    // 计算价格
    getprice() {
      let total = 0;
      for (let obj of this.shopCarList_x) {
        total += obj.num * obj.price;
      }
      return parseFloat(total).toFixed(2);
    },

    // 计算商品添加了多少件数量
    getAddNum() {
      let num = 0;
      for (let item of this.shopCarList_x) {
        num += item.num;
      }
      return num;
    },
  },
};
</script>

<style lang="less" scoped>
.selected {
  background-color: #fff;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.6s ease;
}
.slide-fade-leave-active {
  transition: all 0.6s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(60px); //Y轴弹出效果
  opacity: 0;
}
.order-box {
  flex: 1;
  display: flex;
  overflow: hidden;
  .order-left {
    width: 80px;
    background-color: #f7f8fa;
    overflow: scroll;
    .order_left_tab {
      padding: 22px 10px;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .order-right {
    flex: 1;
    overflow: scroll;
    .nameTitle {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      padding-left: 16px;
      background-color: #f4f4f4;
      text-shadow: 2px;
    }
    .mtsi-num {
      font-size: 12px;
      color: #858687;
      padding: 10px 0;
    }
    .plus {
      height: 20px;
      width: 20px;
      border-radius: 4px;
      font-size: 20px;
      text-align: center;
      line-height: 18px;
      border: 1px solid #ffcc33;
      background-color: #fff;
      margin: 0 10px;
      font-weight: 600;
    }
    .minus {
      height: 20px;
      width: 20px;
      border-radius: 4px;
      font-size: 20px;
      text-align: center;
      line-height: 18px;
      border: 1px solid #ffcc33;
      background-color: #ffcc33;
      margin: 0 10px;
      font-weight: 600;
    }
  }
  .shopcar {
    position: fixed;
    width: 100%;
    bottom: 60px;
    background-color: #fff;
  }

  .nav-bottom {
    width: 350px;
    height: 76px;
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffff;

    div {
      height: 56px;
      display: flex;
      .bottom-left {
        flex: 1;
        // 精灵图片
        background-color: #222426;
        width: 60px;
        border-radius: 30px 0px 0px 30px;
        background-image: url("../../assets/images/ShopCar.png");
        background-attachment: scroll;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 14px 0px;
        position: relative;
        // 小图标显示商品的数量
        .icon-num {
          position: absolute;
          top: 14px;
          left: 44px;
          display: inline-block;
          height: 20px;
          width: 20px;
          border-radius: 50%;
          text-align: center;
          background-color: #fb4e44;
          color: #fff;
        }
      }
      .bottom-center {
        width: 200px;
        background-color: #222426;
        border: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10px 0 10px;
        .price {
          font-size: 22px;
        }
        // 配送费
        .deliveryPrice {
          color: #858687;
          font-size: 12px;
        }
      }
      .bottom-right {
        color: black;
        font-weight: bold;
        line-height: 56px;
        padding-left: 8px;
        flex: 1;
        background-color: #ffcc33;
        border-radius: 0 30px 30px 0;
      }
    }
  }
}
</style>